import React, { useEffect, useState } from 'react'
import http from '../../api/http'
import { NavBar, Toast, Card } from 'antd-mobile'
import { useSearchParams, useNavigate,useLocation } from 'react-router-dom'

function Index() {
  let navigate = useNavigate()
  const [sp] = useSearchParams()
  const title = sp.get('title');
  const price = sp.get('price');
  const id = sp.get('id');
  const [list,setList] = useState([])

  const fetchList = async () => {
    const res = await http.get('/api/order/list/', { params: { title, id, price } })
    console.log(res.data)
    const { code, message,data } = res.data;
    setList(res.data.data)
    if (code === 200) {
      Toast.show({
        icon: 'success',
        content: message,
      })
    } else {
      Toast.show('获取订单失败')
    }
  }
  useEffect(() => {
    fetchList()
  }, [])
  const handleOk = (item) =>{
    // navigate(`/orderOk?title=${title}&id=${id}&price=${price}`)
    navigate('/orderOk',{state:item})
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>订单</NavBar>
      <div>
        <Card title='订单' >
          {
            list && list.map((item,index)=>{
              return <div style={{border:'1px solid #000',padding:'10px'}} onClick={()=>handleOk(item)} key={index}>
                <div>订单号:{item.id}</div>

                <div style={{display:'flex',justifyContent:'space-around',alignItems:'center',margin:'30px'}}>
                  <span>
                    {item.start}
                  </span>
                  <span> → </span>
                  <span>
                    {item.end}
                  </span>
                </div>

                <div style={{display:'flex',justifyContent:'space-around',alignItems:'center',margin:'30px'}}>
                  <span>{item.startTime}</span>
                  <span> → </span>
                  <span>{item.endTime}</span>
                </div>
                <div style={{fontWeight:'bold',fontSize:'20px',color:'red'}}>
                  价格: ￥{item.price}
                </div>
              </div>
            })
          }
        </Card>
      </div>
    </div>
  )
}

export default Index
